<template>
    <div class="bgcard">
        <div class="detail_content">
            <div class="detail_top">
                <div class="top_left"></div>
                <div class="top_t">专属权益详情</div>
                <div class="top_right"></div>
            </div>
            <div class="triangles">
                <img class="triangle" src="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/11/21/efeef6342b5446398ac26b0db607a6aa.png" alt="">
            </div>
            <div class="details">
                <div class="detail_bg">
                    <div class="detail_title"> {{infos.infoOne}}</div>
                    <div class="detail_describe">{{infos.infoTwo || ''}}</div>
                    <div class="detail_expense">{{infos.infoThree || ''}}</div>
                </div>
                <div class="title">{{infos.name}}</div>
            </div>
             <div v-if="usedType == 1 && (cardType !== 'D' && cardType !== 'E')" class="card_illustrate_btn" @click="btnStute == 'fillIn' ? toFillIn() : toLookOver()">{{btnStute == 'fillIn' ? '填写信息' : '查看信息'}}</div>
            <div v-if="usedType == 2 && cardType !== 'D'" class="card_illustrate_btn" @click="toReportQueryed()">查看信息</div>
        </div>
    </div>
</template>

<script>
import {
	baseUrl
} from "@/config/tendIdConfig.js";
export default {
    data() {
        return {
            btnStute:'',
            workState:'',
			workOrderType:'',
			usedType:'',
			cardType:'',
			equityInfoId:'',
			cardNum:'',
			cardId:'',
			infos:{}
        };
    },
	onLoad(options) {
		this.infos = options?.infos && JSON.parse(options?.infos);
		console.log(this.infos,'11111111',options)
		this.workOrderType = options.workOrderType
		this.usedType = options.usedType
		this.cardType = options.cardType
		this.equityInfoId = options.equityInfoId
		this.cardNum = options.cardNum
		this.getCardDetail()
	},
    methods: {
        //获取详情
        getCardDetail(){
			const token = this.$store.getters?.customer_token || uni.getStorageSync("customer_token")
			const that = this;
			uni.request({
			   url: baseUrl + '/customer/equityWorkOrderH5/web/whetherTheWorkOrderCanStillBeSubmitted',
			    method: "POST",
				header: {
					Authorization: token
				},
			    data: {
					equityInfoId:that.equityInfoId,
					cardNum:that.cardNum
			    },
			    success(res) {
					console.log(res.data,'22222')
					if(res.data.data == null){
					   that.btnStute = 'fillIn'
					}else{
					    that.workState = res.data.data.workState
					    that.cardId = res.data.data.id
					    that.btnStute = 'lookOver'
					}
			    },
			});
        },
        toFillIn(){
			//0:不可提交 1：问题咨询  2：上传病例 3：上传报销 4：云档案
            console.log('去填写');
           if(this.workOrderType == '2'){
				this.$u.route({
					url: "/pages_card/userImg/index",
					params: {
						equityInfoId:this.equityInfoId,
						cardNum:this.cardNum
					}
				})
            }else if(this.workOrderType == '3'){
				this.$u.route({
					url: "/pages_card/positiveImg/index",
					params: {
						equityInfoId:this.equityInfoId,
						cardNum:this.cardNum
					}
				})
            }
        },
        toLookOver(){
            console.log('去进度');
			this.$u.route({
				url: "/pages_card/reportQuery/index",
				params: {
					equityInfoId:this.equityInfoId,
					cardNum:this.cardNum,
					cardId:this.cardId,
					workOrderType : this.workOrderType,
				}
			})
        },
        toReportQueryed(){
			this.$u.route({
				url: "/pages_card/reportQueryed/index",
				params: {
					workOrderType : this.workOrderType,
				}
			})
        }
    },
};
</script>

<style scoped>
* {
    padding: 0;
    margin: 0;
}

.detail_content {
  display: inline-block;
  width: 100%;
  /* height: 100%; */
  box-sizing: border-box;
  vertical-align: middle;
  cursor: pointer;
  background-image: url(https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/11/20/1a65b8ce4201488f8567128ae503752c.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.bgcard{
  display: inline-block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  vertical-align: middle;
  cursor: pointer;
  background-image: url(https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/11/20/1a65b8ce4201488f8567128ae503752c.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.details{
    padding: 2.5rem 1.625rem 1.875rem;
    position: relative;
}
.title{
    /* width: 215px; */
    height: 3.0625rem;
    background: linear-gradient(270deg, #FFF0DD 0%, #FFC48D 100%);
    border-radius: 1.875rem 0.25rem 1.875rem 0.25rem;
    font-size: 1rem;
    font-weight: 500;
    color: #292126;
    text-align: center;
    line-height: 3.0625rem;
    position: absolute;
    top: 0.75rem;
    padding: 0 0.75rem;
}
.detail_bg{
  display: inline-block;
 /* height: 28rem;
  max-height: 32rem; */
  vertical-align: middle;
  cursor: pointer;
  background-image: url(https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/11/21/2960e6d6ba884eac9147353a45990ac4.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #FFFFFF;
  padding: 0 2.25rem 80rpx;
}
.detail_title{
    margin-top: 4.125rem;
    font-size: 1.375rem;
    font-weight:500;
}
.detail_describe{
    font-size: 1.125rem;
    margin-top: 0.9375rem;
}
.detail_expense{
    font-size: 1.125rem;
    margin-top: 1.25rem;
    color: #FFB77C;
}


.detail_top{
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 2.375rem;
}
.top_left{
    width: 4.0625rem;
    height: 0rem;
    border: 0.0625rem solid;
    border-image: linear-gradient(250deg, rgba(216.00000232458115, 216.00000232458115, 216.00000232458115, 1), rgba(216.00000232458115, 216.00000232458115, 216.00000232458115, 0)) 1 1
}
.top_right{
    width: 4.0625rem;
    height: 0rem;
    border: 0.0625rem solid;
    transform:rotate(180deg);
    border-image: linear-gradient(250deg, rgba(216.00000232458115, 216.00000232458115, 216.00000232458115, 1), rgba(216.00000232458115, 216.00000232458115, 216.00000232458115, 0)) 1 1;
}
.top_t{
    font-size: 1.625rem;
    font-weight: 500;
    color: #EAD7AC;
    margin: 0 0.5rem;
}
.triangles{
    width: 0.625rem;
    height: 2.125rem;
    margin: 1.25rem auto 0.625rem;
}
.triangle{
    width: 0.625rem;
    height: 2.125rem;
}


.card_illustrate_btn{
  width: 16.5625rem;
  height: 3.25rem;
  background: linear-gradient(315deg, #EAA95B 0%, #FCE0B1 100%);
  border-radius: 0.75rem;
  font-size: 1rem;
  font-weight: 500;
  color: #473920;
  text-align: center;
  line-height: 3.25rem;
  margin: 0 auto 3.125rem;
}
</style>
